<template>
 <!--使用根模块state的数据 -->
  <div>
  {{$store.state.username}}
  </div>
  <button @click="fn">改变名字</button>
  <button @click="$store.commit('editname')">改变</button>
  <button @click="$store.dispatch('updatename')">3秒后改变名字</button>
  <!--使用根模块getters的数据-->
  <div>{{$store.getters['newname']}}</div>
</template>
<script>
import {useStore} from 'vuex'
  export default {
    name:'App',
    setup(){
      //使用vuex仓库
      const store = useStore()
      //使用根模块state的数据
      console.log(store.state.username);
      console.log(store.getters.newname);
      const fn=()=>{
        store.commit('editname')
      }
      //调用根模块的actions函数
      // store.dispatch('updatename')
      return {fn}
    }
  }
</script>

<style>

</style>
